.wrap {
	height: 100vh;
	background: #f6f8fe;
	.top {
		width: 100%;
		// position: fixed;
		// top: 0;
		// z-index: 111;
		background-color: #fff;
		.search-box {
			height: 70.09rpx;
			padding: 0 35.05rpx;
			background: #615DEE;
			color: #fff;
			display: flex;
			align-items: center;
			.location {
				display: flex;
				font-size: 25rpx;
				.name {
					margin-right: 14.53rpx;
				}
			}
			.search {
				width: 80%;
				height: 80%;
				background: #fff;
				display: flex;
				border-radius: 35rpx;
				margin-left: 35.05rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				.search-icon {
					width: 26.8rpx;
					height: 26.8rpx;
					margin-left: 15.77rpx;
				}
				.search-input {
					width: 100%;
					font-size: 21rpx;
					margin-left: 14.02rpx;
					color: #969696;
				}
			}
		}
	}
	.content {
		overflow: hidden;
		.banner {
			.indicator {
				display: flex;
				justify-content: center;
		
				&__dot {
					height: 6px;
					width: 6px;
					border-radius: 100px;
					background-color: rgba(255, 255, 255, 0.35);
					margin: 0 5px;
					transition: background-color 0.3s;
		
					&--active {
						background-color: #fff;
					}
				}
			}
		}
		.menu {
			overflow-x: scroll;
			.menu-box {
				display: flex;
				padding: 45.56rpx 52.57rpx 0 52.57rpx;
				.menu-con {
					width: 122.66rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					// justify-content: center;
					padding-right: 63.08rpx; 
					.menu-img {
						width: 70.09rpx;
						height: 70.09rpx;
					}
					.name {
						font-size: 25rpx;
						white-space: nowrap;
						margin-top: 17.52rpx;
					}
				}
			}
		}
		.settled-image {
			width: calc(100% - 77.1rpx);
			height: 220.79rpx;
			padding: 66.59rpx 0 0 38.55rpx;
		}
		.tab-list-filter {
			.list-tab {
				margin: 36.8rpx 0 0 0;
				overflow-x: scroll;
				overflow-y: hidden;
				height: 58rpx;
				.tab-box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					padding: 0 38.55rpx;
					.tab, .tab-active {
						color: #000000;
						font-size: 32rpx;
						position: relative;
						margin-right: 35.05rpx;
						.name {
							white-space: nowrap;
						}
						.line {
							width: 100%;
							height: 8.01rpx;
							position: absolute;
							bottom: -15.75rpx;
							background-color: #FF8267;
						}
					}
					.tab-active {
						font-weight: bolder;
					}
				}
				
			}
			.list-filter {
				display: flex;
				align-items: center;
				padding: 29.79rpx 38.55rpx 0;
				.all-buy {
					display: flex;
					align-items: center;
					margin-right: 50rpx;
					.name {
						font-size: 25rpx;
						margin-right: 8.76rpx;
					}
				}
			}
			.suggest-filter {
				padding: 24.53rpx 0 0 35.05rpx;
				overflow-x: scroll;
				overflow-y: hidden;
				height: 58rpx;
				.suggest-box {
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					padding: 0 0 38.55rpx 0;
					.suggest {
						color: #8E8E8E;
						font-size: 21rpx;
						position: relative;
						margin-right: 35.05rpx;
						background: #fff;
						border-radius: 53rpx;
						padding: 0.1rem 0.4rem;
						.name {
							white-space: nowrap;
						}
					}
				}
			}
		}
		.tab-content {
			padding: 0 38.55rpx 0;
			margin-top: 20rpx;
			.list-con {
				margin-bottom: 17.52rpx;
				border-radius: 35rpx;
				.skeleton-box {
					// height: calc(303.15rpx - 31.54rpx * 2);
					display: flex;
					flex-direction: row;
					padding: 31.54rpx;
					font-size: 21rpx;
					.list-left {
						position: relative;
						.left-img {
							height: 136.68rpx;
							width: 136.68rpx;
							border-radius: 32rpx;
							border: 1rpx solid #F5F5F5;
						}
						.audition {
							position: absolute;
							bottom: 0rpx;
							right: 0;
							font-size: 21rpx;
							background: linear-gradient( 221deg, #FBD38D 0%, #D19A43 100%);
							border-radius: 18rpx;
							padding: 1rpx 15rpx;
						}
					}
					.list-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 22.78rpx;
						.name-box {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							margin-bottom: 8.76rpx;
							.name {
								font-size: 28rpx;
								font-weight: bolder;
							}
							.crown {
								width: 25.99rpx;
								height: 23.17rpx;
								margin-bottom: 9rpx;
							}
						}
						.star-box {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 5.51rpx;
							.star {
								display: flex;
								align-items: center;
								
								.star-img {
									width: 24.53rpx;
									height: 24.53rpx;
									margin-right: 7.01rpx;
								}
							}
							.sell {
								color: #FF8267;
								font-size: 21rpx;
							}
						}
						.location {
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #CBCBCB;
							margin-bottom: 11.52rpx;
							.left {
								display: flex;
								.name {
									margin-right: 19rpx;
								}
							}
							.right {
								display: flex;
								.range {
									font-size: 18rpx;
									margin-left: 5rpx;
								}
							}
						}
						.attestation {
							display: flex;
							margin-bottom: 23.29rpx;
							.teacher-num {
								color: #FF8267;
								padding: 1rpx 15rpx;
								background: #FFF2EF;
								border-radius: 18rpx;
							}
						}
						.tuan-buy, .free-buy {
							margin-bottom: 7.28rpx;
							display: flex;
							align-items: center;
							.tuan, .free {
								color: #FF8267;
								padding: 1rpx 5rpx;
								background: #FFF2EF;
								border-radius: 7rpx;
								margin-right: 20rpx;
							}
						}
					}
				}
				.gratia-skeleton-box {
					// height: calc(413.55rpx - 31.54rpx);
					padding: 31.54rpx;
					font-size: 21rpx;
					
					.title {
						color: #9E2D34;
						span:nth-child(1) {
							font-weight: bolder;
							margin-right: 10rpx;
						}
						span:nth-child(2) {
							font-size: 18rpx;
							margin-left: 10rpx;
						}
					}
					.gratia-con {
						// width: calc(100% - 31.54rpx * 2);
						// height: calc(303.15rpx - 31.54rpx);
						background: #fff;
						margin-top: 24.53rpx;
						border-radius: 35rpx;
						padding: 31.54rpx;
						.top {
							display: flex;
							justify-content: space-between;
							border-bottom: 1rpx solid #F6F8FE;
							padding-bottom: 24.53rpx;
							.left-img {
								width: 78.86rpx;
								height: 78.86rpx;
								border-radius: 11rpx;
							}
							.name-con-box {
								flex: 1;
								margin-left: 22.78rpx;
								.name-box {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-bottom: 8.76rpx;
									.name {
										font-size: 28rpx;
										font-weight: bolder;
									}
									.enter-store {
										color: #CBCBCB;
										font-size: 25rpx;
										display: flex;
										align-items: center;
										.name {
											margin-right: 3.27rpx;
										}
									}
								}
							}
							.star-box {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 5.51rpx;
								.star {
									display: flex;
									align-items: center;
									
									.star-img {
										width: 24.53rpx;
										height: 24.53rpx;
										margin-right: 7.01rpx;
									}
								}
								.range-box {
									color: #CBCBCB;
									font-size: 21rpx;
									display: flex;
									.range {
										font-size: 18rpx;
										margin-left: 5rpx;
									}
								}
							}
						}
						.bottom {
							display: flex;
							justify-content: space-between;
							margin-top: 24.53rpx;
							.left-img {
								height: 136.68rpx;
								width: 136.68rpx;
								border-radius: 32rpx;
								border: 1rpx solid #F5F5F5;
							}
							.name-con-box {
								flex: 1;
								margin-left: 22.78rpx;
								.name-box {
									display: flex;
									justify-content: space-between;
									align-items: center;
									margin-bottom: 8.76rpx;
									.name {
										font-size: 28rpx;
										font-weight: bolder;
									}
									.enter-store {
										color: #CBCBCB;
										font-size: 25rpx;
										display: flex;
										align-items: center;
										.name {
											margin-right: 3.27rpx;
										}
									}
								}
								.gratia-mess {
									font-size: 14rpx;
									margin-top: 10.76rpx;
									span {
										color: #FF8267;
										background: #FFF2EF;
										border-radius: 53rpx;
										padding: 1rpx 15rpx;
									}
									span:nth-child(1) {
										margin-right: 15rpx;
									}
								}
								.rob-box {
									height: 56.07rpx;
									background: #FDE8EB;
									border-radius: 70rpx;
									margin-top: 19.28rpx;
									display: flex;
									justify-content: space-between;
									align-items: center;
									color: #ED0000;
									font-size: 14rpx;
									padding-left: 25rpx;
									.rob-left {
										display: flex;
										flex-direction: column;
										.rob-top {
											display: flex;
											align-items: center;
											font-size: 21rpx;
											span {
												margin-right: 8.76rpx;
											}
											span:nth-child(1) {
												font-weight: bolder;
											}
											span:nth-child(2) {
												border: 1rpx solid #ED0000;
												border-radius: 10rpx;
												padding: 0rpx 5rpx;
												font-size: 11rpx;
											}
											span:nth-child(3) {
												font-size: 14rpx;
												color: #9B9B9B;
												font-weight: bold;
												text-decoration: line-through;
											}
										}
										.rob-bottom {
											display: flex;
											align-items: center;
											.hot {
												width: 15.77rpx;
												height: 15.77rpx;
												margin-right: 3.75rpx;
											}
										}
									}
									.rob-right {
										height: 100%;
										display: flex;
										align-items: center;
										background: #ED0000;
										color: #fff;
										border-radius: 70rpx;
										padding: 0 5.78px;
										span {
											margin: -2rpx 0  5rpx;
										}
									}
								}
							}	
						}
					}
				}
			}
		}
	}
}